import AutoComplete from 'antd/es/auto-complete';
import Divider from 'antd/es/divider';
import { AppStore } from '../../../../store';
import { useMemo, useState } from 'react';
import { flattenModels } from '../../../../util';

export function ViewDemo(props: {
    createButton: (infos: Array<{
        /** buttonName */
        name: string,
        onClick: () => void;
    }>) => JSX.Element[]
}) {
    const { createButton } = props;
    const { appState: { app, jsonData } } = AppStore.useContainer();
    const [inputModelId, setInputModelId] = useState<string>();


    const models = useMemo(() => {
        return flattenModels(jsonData?.paramModel || []);
    }, [jsonData])

    const CSceneApis = [
        {
            name: '重置场景',
            onClick: () => app!.sceneService.clear()
        },
        {
            name: '更新场景尺寸',
            onClick: () => app!.sceneService.resize()
        },
        {
            name: '重置视角',
            onClick: () => app!.sceneService.resetPerspective()
        },
    ];

    const CModelApis = [{
        name: '隐藏模型',
        onClick: () => inputModelId && app!.modelService.setVisibility([inputModelId], false)
    }, {
        name: '显示模型',
        onClick: () => inputModelId && app!.modelService.setVisibility([inputModelId], true)
    }]

    return <>
        <Divider>场景展示</Divider>
        {createButton(CSceneApis)}
        <Divider>模型展示</Divider>
        <AutoComplete value={inputModelId} onChange={(data) => setInputModelId(data)} style={{ width: '100%' }} placeholder='输入或者选择模型id' options={models.map(m => ({ value: m.id }))} />
        {createButton(CModelApis)}
    </>
}